<!-- components/MenuTree.vue -->
<template>
  <!--  添加对 menu 数据的基本校验  -->
  <div v-if="!isValidMenu" class="menu-error">
    <el-icon><Warning /></el-icon>
    无效菜单
  </div>

  <el-sub-menu
      v-else-if="menu.children && menu.children.length > 0"
      :index="menu.menuName || menu.id.toString()"
  >
    <template #title>
      <el-icon v-if="menu.icon" class="menu-icon">
        <!--  安全地渲染图标组件  -->
        <component :is="menu.icon" @error="handleIconError" />
      </el-icon>
      <span>{{ menu.menuName }}</span>
    </template>

    <MenuTree
        v-for="child in menu.children"
        :key="child.id || child.menuName || 'default'"
        :menu="child"
    />
  </el-sub-menu>

  <!--  其他菜单类型的渲染保持不变  -->
  <el-menu-item
      v-else-if="menu.externalLink"
  >
    <el-icon v-if="menu.icon">
      <component :is="menu.icon" @error="handleIconError" />
    </el-icon>
    <template #title>
      <el-link :href="menu.path" target="_blank">{{menu.menuName}}</el-link>
    </template>
  </el-menu-item>

  <el-menu-item
      v-else
      :index="menu.path || ''"
  >
    <el-icon v-if="menu.icon">
      <component :is="menu.icon" @error="handleIconError" />
    </el-icon>
    <template #title>{{ menu.menuName }}</template>
  </el-menu-item>
</template>

<script setup lang="ts">
import {type Menu} from '@/types/base.ts';
import {computed} from 'vue';
import {Warning} from '@element-plus/icons-vue';

const props = defineProps<{menu: Menu}>();

// 计算属性用于验证菜单数据的有效性
const isValidMenu = computed(() => {
  return props.menu &&
      typeof props.menu === 'object' &&
      props.menu.menuName &&
      (props.menu.id || props.menu.path);
});

// 处理图标渲染错误
const handleIconError = (error: Event) => {
  console.error('Menu icon rendering error:', error);
};
</script>

<style scoped>
.menu-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: #f56c6c;
  background-color: #fef0f0;
  border-radius: 4px;
}
</style>
